<template>

    <div id="J_prismPlayer" class="prism-player"></div>
</template>
<script>
    import {api} from '@/tools/api'
    require('@/tools/prism-h5-min')

    export default {
        name: 'movie',
        data () {
            return {
                raw:'https://www.fantasy.tv/video/play.html?tvId=87816&channelId=33716',
                m3u8: {},
                json:{},
            }
        },
        created(){
            this.fetchData()

        },
        methods:{
            fetchData(){
                let myCID = 22603;
                let vID = 87816
                let chanelID = 33716
                let t = Math.random()
                let that = this
                let queryURL = 'https://www.fantasy.tv/tv/playDetails.action?myChannelId='+myCID+"&id="+vID+"&channelId="+chanelID+"&t="+t
                api.get(queryURL)
                    .then(function (response) {
                        that.json = response.data.data

                        var videoUrl=response.data.data.tv.videoPath
                        // 初始化播放器
                        var player = new prismplayer({
                            id: "J_prismPlayer", // 容器id
                            source: videoUrl,        // 视频url
                            width: "100%",       // 播放器宽度
                            height: "400px"      // 播放器高度
                        });



                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            }
        },
        watch:{
            '$route.params.episodeId':'fetchData',

        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .video {
        position: relative;
        display: block;
        width: 100%;
        padding-top: 56.25;
        padding: 0;
        overflow: hidden;
    }
</style>
